<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import api from '@/api'
import { Message } from '@arco-design/web-vue'
import UploadImage from '@/components/uploadImage.vue'

const $route = useRoute()
const $router = useRouter()

const currentDepartmentIndex = ref(0)
const departmentList = ref([])
const listData = ref([])
const listLoading = ref(false)
const formData = ref({
  id: null,
  name: '',
  image: '',
  department_id: null,
}) // 板块表单
const formVisible = ref(false) // 板块管理弹窗

const iconList = ref([])
const formVisibleIcon = ref(false)

const getListData = async () => {
  listLoading.value = true
  try {
    const res = await api.get(
      'course/collections/' +
        departmentList.value[currentDepartmentIndex.value].id
    )
    console.log('res', res)
    listData.value = res.data.collections
  } catch (error) {
    console.error(error)
  }
  listLoading.value = false
}

const getDepartmentList = async () => {
  try {
    const res = await api.get('course/departmentOptions')
    console.log('res', res)
    departmentList.value = res.data

    getListData()
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const changeDepartmentIndex = async (index) => {
  listData.value = []
  currentDepartmentIndex.value = index
  getListData()
}

const showFormData = async (record) => {
  if (record) {
    formData.value.id = record.id
    formData.value.name = record.name
    formData.value.image = record.image
    formData.value.department_id = record.department_id
  } else {
    resetFormData()
  }
  formVisible.value = true
} // 显示板块表单

const formSubmit = async () => {
  console.log('formSubmit', formData.value)
  var obj = { ...formData.value }
  if (!obj.name) {
    Message.error('板块名称不可为空')
    return false
  }
  if (!obj.image) {
    Message.error('请上传图标')
    return false
  }
  if (!obj.department_id) {
    Message.error('请选择部门')
    return false
  }
  if (obj.id) {
    try {
      const res = await api.post('course/collection/update/' + obj.id, obj)
      Message.success(res.message)
      getListData(1)
      resetFormData()
    } catch (error) {
      console.error('error', error)
      return false
    }
  } else {
    try {
      const res = await api.post('course/collection/create', obj)
      Message.success(res.message)
      getListData(1)
      resetFormData()
    } catch (error) {
      console.error('error', error)
      return false
    }
  }
} // 提交板块表单

const resetFormData = async () => {
  formData.value = {
    id: null,
    name: '',
    image: '',
    department_id: null,
  }
}

const deleteItem = async (id) => {
  try {
    const res = await api.get('course/collection/del/' + id)
    Message.success(res.message)
    getListData()
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const getIconList = async (id) => {
  try {
    const res = await api.get('course/collection/icon')
    iconList.value = res.data
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const useIcon = async (record) => {
  formData.value.image = record.icon
  formVisibleIcon.value = false
}

const jumpTo = async (url) => {
  $router.push(url)
}
getDepartmentList()
getIconList()
</script>

<template>
  <div class="page">
    <div class="header">
      <a-button @click="showFormData()"
                type="primary">新增板块</a-button>
    </div>

    <div class="talent_body">
      <div class="switch_category">
        <div class="switch_category_div">
          <div class="name">部门</div>
          <div class="category_list">
            <div @click="changeDepartmentIndex(index)"
                 class="category_cell"
                 :class="{active: currentDepartmentIndex==index}"
                 v-for="(item,index) in departmentList"
                 :key="index">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="talent_table">
        <a-table :data="listData">
          <template #columns>
            <a-table-column title="序号"
                            :width="60">
              <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
            </a-table-column>
            <a-table-column title="板块名称"
                            data-index="name"></a-table-column>
            <a-table-column title="拥有课程数"
                            data-index="course"></a-table-column>
            <a-table-column title="图标">
              <template #cell="{ record }">
                <a-image width="100"
                         :src="record.image" />
              </template>
            </a-table-column>
            <a-table-column title="添加时间"
                            data-index="created_at"></a-table-column>
            <a-table-column title="操作"
                            align="center"
                            :width="300">
              <template #cell="{ record }">
                <a-space>
                  <a-popconfirm @ok="deleteItem(record.id)"
                                content="确认删除该数据吗?"
                                type="warning">
                    <a-button type="primary"
                              status="danger"
                              size="mini">删除</a-button>
                  </a-popconfirm>
                  <a-button @click="showFormData(record)"
                            type="primary"
                            size="mini">编辑</a-button>
                  <a-button @click="jumpTo('/course/setupDetails?departmentIndex=' + currentDepartmentIndex + '&collection_id=' + record.id)"
                            type="primary"
                            size="mini">课程列表</a-button>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>

        <a-modal :title="formData.id ? '编辑板块':'添加板块'"
                 width="600px"
                 :on-before-ok="formSubmit"
                 v-model:visible="formVisible">
          <a-form>
            <a-form-item label="板块名称">
              <a-input :style="{width:'400px'}"
                       v-model="formData.name"
                       placeholder="请输入板块名称"
                       allow-clear></a-input>
            </a-form-item>
            <a-form-item label="图标">
              <UploadImage width="200px"
                           height="200px"
                           v-model="formData.image"></UploadImage>
            </a-form-item>
            <a-form-item label="">
              <a-button @click="formVisibleIcon = true" type="primary">查看图标库</a-button>
            </a-form-item>
            <a-form-item label="部门">
              <a-select v-model="formData.department_id"
                        :style="{width:'400px'}"
                        placeholder="请选择部门">
                <a-option :value="item.id"
                          v-for="(item,index) in departmentList"
                          :key="index">
                  {{ item.name }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-form>
        </a-modal>

        <a-modal title="选择图标"
                 width="800px"
                 :footer="false"
                 v-model:visible="formVisibleIcon">
          <a-table :data="iconList">
            <template #columns>
              <a-table-column title="序号"
                              :width="60">
                <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
              </a-table-column>
              <a-table-column title="标题"
                              data-index="title"></a-table-column>
              <a-table-column title="图标">
                <template #cell="{ record }">
                  <a-image width="100"
                           height="100"
                           fit="cover"
                           :src="record.icon" />
                </template>
              </a-table-column>
              <a-table-column title="操作"
                              align="center"
                              :width="100">
                <template #cell="{ record }">
                  <a-space>
                    <a-button @click="useIcon(record)"
                              type="primary"
                              size="mini">使用</a-button>
                  </a-space>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page {
  height: 100%;
}

.header {
  height: 52px;
  display: flex;
  justify-content: flex-end;
}

.talent_body {
  width: 100%;
  height: calc(100% - 52px);
  display: flex;
}

.switch_category {
  width: 200px;
  display: flex;
}

.switch_category_div {
  flex: 1;
  background: #ffffff;
  box-sizing: border-box;
  border-top: 1px solid #e5e6eb;
}

.switch_category_div:not(:last-child) {
  border-right: 1px solid #e5e6eb;
}

.switch_category_div .name {
  background-color: #f2f3f5;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch_category_div .category_list {
  height: calc(100% - 40px);
  overflow-y: auto;
}

.switch_category_div .category_cell {
  cursor: pointer;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch_category_div .active {
  background-color: #165dff;
  color: #fff;
}

.talent_table {
  width: calc(100% - 200px);
}
</style>